<template>
  <!-- 头部导航 -->
  <van-nav-bar title="发布闲置" style="font-size: 20px;" left-text="返回" left-arrow @click-left="onClickLeft" />
  <!-- 输入框 -->
  <!-- <nut-input v-model="val" label="文本" placeholder="请输入商品标题" /> -->
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="xianzhiObj.goodsName" name="goodsName" rows="1" autosize type="textarea" placeholder="商品标题"
          style="font-size: 18px" :rules="[{ required: true, message: '请填写商品标题' }]" />
      </van-cell-group><br>
      <!-- <nut-input v-model="val1" autosize type="text" show-word-limit rows="10" max-length="200" placeholder="请输入留言" /> -->
      <van-cell-group inset>

        <van-field v-model="xianzhiObj.details" name="details" rows="3" autosize type="textarea" maxlength="50"
          style="font-size: 16px" placeholder="描述一下商品的品牌，新旧程度，让商品更快出售。。。" show-word-limit
          :rules="[{ required: true, message: '请填写商品详细信息' }]" />
      </van-cell-group><br>
      <!-- 商品品牌 -->
      <div>
        <van-field v-model="xianzhiObj.brand" is-link readonly name="picker" label="品牌" placeholder="选择品牌"
          left-icon="apps-o" @click="showPicker = true"  />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
      </div>
      <br>
      <br>
      <!-- //上传图片 -->
      <div>
        <van-field v-model="xianzhiObj.picture" name="picture" :rules="[{ required: true, message: '上传图片才能发布哦' }]">
          <!-- <van-image width="6rem" height="6rem" :src="goodsUrl" @click="toSelectImage" /> -->
          <template #input>
            <van-uploader :after-read="afterRead" ref="uploaderRef" v-model="picture" name="picture" multiple />
          </template>
        </van-field>
        <br>
      </div>
      <br><br><br><br>
      <!-- 价格：弹出数字键盘 -->
      <div>
        <div>
          <!-- <van-icon name="gold-coin" color="red" /> -->
          <van-field v-model="xianzhiObj.price" name="price" readonly clickable @touchstart.stop="showkeyborad = true"
            left-icon="balance-o" label="价格" placeholder="请输入价格" :rules="[{ required: true, message: '请输入价格' }]" />
          <van-number-keyboard v-model="xianzhiObj.price" name="price" :show="showkeyborad" title="请输入价格" :maxlength="6"
            @input="onInput" @delete="onDelete" @blur="showkeyborad = false" extra-key="." close-button-text="完成">
          </van-number-keyboard>
        </div>
      </div><br><br>
      <!-- 商品类型 -->
      <div>

        <van-field v-model="xianzhiObj.goodsType" is-link readonly name="picker" label="商品类型" placeholder="选择类型"
          left-icon="gift-card-o" @click="showPickerType = true" />
        <van-popup v-model:show="showPickerType" position="bottom">
          <van-picker :columns="columnsType" @confirm="onConfirmType" @cancel="showPickerType = false" />
        </van-popup>
      </div>
      <br><br>
      <!-- 成色选择 -->
      <van-field v-model="xianzhiObj.quality" is-link name="quality" label="成色选择">
        <template #input>
          <van-radio-group v-model="xianzhiObj.quality" direction="horizontal">
            <van-radio name="全新">全新</van-radio>
            <van-radio name="5成新">5成新</van-radio>
            <van-radio name="7成新">7成新</van-radio>
            <van-radio name="8成新">8成新</van-radio>
            <van-radio name="微瑕">微瑕</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <br><br>
      <br>
      <!-- 选择地址 -->
      <div>

        <van-icon name="location-o" />
        <nut-cell title="选择地址" :desc="text" is-link @click="showAddress"
          :rules="[{ required: true, message: '请填写地址' }]"></nut-cell>
        <nut-address v-model:visible="showPopup" :province="address.province" :city="address.city"
          :country="address.country" :town="address.town" @change="onChange" @close="close"
          custom-address-title="请选择所在地区"></nut-address>
      </div>
      <br>
      <!-- 发货方式:动作面板 -->
      <div>
        <van-icon name="fire" />
        <nut-cell is-link @click="click">
          <div>发货方式 ：</div>
          <div>{{ val }}</div>
        </nut-cell>
      </div>
      <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" @choose="choose" /><br>
      
      <van-field
  v-model="xianzhiObj.listTime"
  is-link
  readonly
  name="calendar"
  label="日历"
  placeholder="点击选择日期"
  @click="showCalendar = true"
/>
<van-calendar v-model:show="showCalendar" @confirm="onConfirm1" /><br>

      <!-- 确认发布按钮 v-for="g in goods" :key="g.id" -->
      <div style="margin: 20px;">
        <van-button type="primary" block round native-type="submit" color="#e2d308">确认发布</van-button>
      </div>
    </van-form>

  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import { ref, reactive, toRefs } from 'vue';
import { showToast, showNotify, Toast } from 'vant';
import { useRouter } from 'vue-router'; //路由器
import { uploadImage } from '@/utils/api.js' //图片上传
import { default as http, getImageUrl } from '@/utils/request.js';
import { Dialog } from '@vant/compat';
// showToast("发布闲置")
const router = useRouter();
//成色选择
// const quality=ref('');
const quality = ref('0');
//// 上传图片上传图片文件上传
const picture = ref([

]);
// const picture=ref('');
const uploaderRef = ref(null);
const goodsUrl = ref("");

// 返回上一页面
const onClickLeft = () => history.back();
// return {
//   onClickLeft,
// };

// 商品品牌
const brand = ref('');
const showPicker = ref(false);
const columns = [
  [
    { text: '华为HUAWEI', value: 'Hangzhou' },
    { text: '美的Midea', value: 'Ningbo' },
    { text: '海尔Haier', value: 'Wenzhou' },
    { text: '小米XIAOMI', value: 'Shaoxing' },
    { text: '香奈儿CHANEL', value: 'Huzhou' },
    { text: '荣耀HONOR', value: 'Huzhou' },
    { text: '雅诗兰黛ESEE LAUDER', value: 'Huzhou' },
    { text: '比亚迪BYD', value: 'Huzhou' },
    { text: '耐克NIKE', value: 'Huzhou' },
    { text: '其他小众', value: 'Huzhou' },
  ],

];
const onConfirm = ({ selectedOptions }) => {
  xianzhiObj.brand = selectedOptions[0]?.text;
  showPicker.value = false;
};
//日期选择
const listTime = ref(''); 
 const date = ref('');
    const showCalendar = ref(false);
  
    const onConfirm1 = (date) => {
      xianzhiObj.listTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      showCalendar.value = false;
    };
//商品描述
const rows = ref('');
const message1 = ref('');
const message = ref('');
// 弹出默认键盘：选择价格
const showkeyborad = ref(false);
const price = ref('');
const onInput = (price) => showToast(price);
const onDelete = () => showToast('删除');

//选项卡先显示：选择发货方式

const visible = ref(false);
const val = ref('');
const menuItems = [
  {
    name: '  自提'
  },
  {
    name: '  邮寄'
  }

];
const click = (param) => {
  visible.value = !visible.value;
};
const choose = (item) => {
  val.value = item.name;
};
//商品类型选择
const goodsType = ref('');
const showPickerType = ref(false);
const columnsType = [
  // 第一列
  {
    text: '服装衣物',
    value: 'Zhejiang',
    children: [
      {
        text: '上衣',
        value: 'Hangzhou',

      },
      {
        text: '裤子',
        value: 'Wenzhou',

      },
    ],
  },
  {
    text: '家用电器',
    value: 'Fujian',
    children: [
      {
        text: '个护健康',
        value: 'Fuzhou',

      },
      {
        text: '生活电器',
        value: 'Xiamen',

      },
      {
        text: '厨房小电',
        value: 'Xiamen',

      },
      {
        text: '大家电',
        value: 'Xiamen',

      },
    ],
  },
  {
    text: '数码',
    value: '数码',
    children: [
      {
        text: '摄影摄像',
        value: '摄影摄像',

      },
      {
        text: '数码配件',
        value: '数码配件',

      },
      {
        text: '影音娱乐',
        value: '影音娱乐',

      },
      {
        text: '智能设备',
        value: '智能设备',

      },
    ],
  },
  {
    text: '电脑、办公',
    value: '电脑、办公',
    children: [
      {
        text: '电脑整机',
        value: '电脑整机',

      },
      {
        text: '电脑组件',
        value: '电脑组件',

      },
      {
        value: '外设产品',
        text: '外设产品',

      },
      {
        value: '办公设备',
        text: '办公设备',

      },
      {
        value: '文具',
        text: '文具',

      },
      {
        value: '游戏设备',
        text: '游戏设备',

      },
    ],
  },
  {
    value: '箱包皮具',
    text: '箱包皮具',
    children: [
      {
        value: '精品男包',
        text: '精品男包',

      },
      {
        value: '潮流女包',
        text: '潮流女包',

      },
      {
        value: '功能箱包',
        text: '功能箱包',

      },
    ]
  },
  {
    value: '化妆品',
    text: '化妆品',
    children: [
      {
        value: '水乳',
        text: '水乳',

      },
      {
        value: '粉底彩妆',
        text: '粉底彩妆',

      },
      {
        value: '化妆用具',
        text: '化妆用具',

      },
    ]
  },

];
const onConfirmType = ({ selectedOptions }) => {
  xianzhiObj.goodsType = selectedOptions[0, 1]?.text;
  showPickerType.value = false;
};

// 选择地址
const showPopup = ref(false);
const address = reactive({
  province: [
    { id: 1, name: '宁夏' },
    { id: 2, name: '广西' },
    { id: 3, name: '江西' },
    { id: 4, name: '四川' }
  ],
  city: [
    { id: 7, name: '银川市' },
    { id: 8, name: '崇文区' },
    { id: 9, name: '昌平区' },
    { id: 6, name: '石景山区' }
  ],
  country: [
    { id: 3, name: '西夏区' },
    { id: 9, name: '北苑' },
    { id: 4, name: '常营乡' }
  ],
  town: []
});

const text = ref('选择地址');

const showAddress = () => {
  showPopup.value = !showPopup.value;
};

const onChange = (cal) => {
  const name = address[cal.next];
  if (!name || name.length < 1) {
    showPopup.value = false;
  }
};
const close = (val) => {
  text.value = val.data.addressStr;
};
const userName = ref('');
const details = ref('');

//reactive 声明对象类型响应式状态
const xianzhiObj = reactive({
  userId: '',
  goodsName: '',
  details: '',
  goodsType: '',
  price: '',
  picture: [],
  brand: '',
  quality: '',
  listTime:'',
  sellerName:'',
});
// 图片上传
const toSelectImage = function () {
  uploaderRef.value.chooseFile();
}
//图片上传方法
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
  uploadImage(file)
    .then((url) => {
      console.log("上传成功，返回url = ", url)
      xianzhiObj.picture = url;
      goodsUrl.value = url;
    })
    .catch((err) => {
      console.log("失败消息：", err)
    });
};

// 与后端交互 将商品信息传到后端数据库

const onSubmit = () => {
  console.log("发布闲置中。。。", xianzhiObj);
  Dialog({ title: '提示', message: '确认发布吗？' })
    .then(function () {
      http.get("/user/info").then((response) => {
        console.log("获取个人信息 = ", response);
        console.log("id:", response.data.data.id);
        //获取到当前用户的ID
        //xianzhiObj.userName=response.data.data.userName;
        xianzhiObj.userId = response.data.data.id;
        xianzhiObj.sellerName = response.data.data.userName;
        http.post("/user/xianzhi/", xianzhiObj,
        )
        console.log('添加闲置商品：');
        showNotify({ type: 'success', message: '发布成功' });
        setTimeout(() => {
          router.push("/fabusuccess");
        }, 1000);

      }).catch(err => {
        console.log('添加失败', err)
      });
    });
};

onMounted(() => {


});

</script>
    
<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

/* 上传图片 */
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.nut-cell__title {
  width: 50%;
  font-size: large;
}

.nut-cell {
  position: relative;
  display: flex;
  width: 95%;
  line-height: var(--nut-cell-line-height, 20px);
  padding: var(--nut-cell-padding, 13px 19px);
  background: var(--nut-cell-background, var(--nut-white, #fff));
  border-radius: var(--nut-cell-border-radius, 6px);
  box-shadow: var(--nut-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));
  font-size: var(--nut-cell-title-font, var(--nut-font-size-2, 15px));
  color: var(--nut-cell-color, var(--nut-title-color2, #666666));
  margin: -10px 0;
  box-sizing: border-box;
  float: right;
}


.van-cell {

  width: 103.9%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  margin: 0%;
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  line-height: var(--van-cell-line-height);
  background: var(--van-cell-background);
  float: right;
  margin: -10px 1px;
}
</style>